/* 
  学习目标：使用 useEffect 模拟卸载时的生命周期
*/

// 1. 导入 useState钩子函数： 声明状态
import React, { useEffect, useState } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      <button
        onClick={() => {
          setIsShow(!isShow);
        }}
      >
        点我切换子组件
      </button>
      {isShow && <Child></Child>}
    </div>
  );
}

function Child() {
  const scrollFn = () => {
    console.log('窗口大小改变了----->');
  };
  useEffect(() => {
    window.addEventListener('resize', scrollFn);
    // 语法： useEffect回调函数内，返回一个函数，这个函数就是卸载时会自动执行的钩子函数
    // 通过返回一个函数，模拟卸载时的生命周期
    return () => {
      window.removeEventListener('resize', scrollFn);
    };
  });
  return (
    <div>
      <h1>Child子组件</h1>
    </div>
  );
}
